<template>
  <div class="hello">
    <p>你只需要this.$dialog.open(option)即可打开一个乃至100个弹框</p>
    <h3>通用对话框示例</h3>

    <div class="flex-div">
      <div class="flex-item">
        <button @click="closeAll">关闭所有对话框</button>
      </div>
      <div class="flex-item">
        <button @click="opneHTM">打开HTML对话框</button>
        <button @click="closeHTM">关闭HTML对话框</button>
      </div>
      <div class="flex-item">
        <button @click="opneVue">打开Vue组件对话框</button>
        <button @click="closeVue">关闭Vue组件对话框</button>
      </div>
      <div class="flex-item">
        <button @click="opneDom">打开Dom对象对话框</button>
        <button @click="closeDom">关闭Dom对象对话框</button>
      </div>
      <div class="flex-item">
        <button @click="opneDomLong">打开标题过长对话框</button>
        <button @click="closeDomLong">关闭标题过长对话框</button>
      </div>
      <div class="flex-item">
        <button @click="opneArea">指定弹框大小</button>
      </div>
      <div class="flex-item">
        <button @click="opneLocation">指定弹框位置</button>
      </div>
      <div class="flex-item">
        <button @click="opneShade">有遮罩，点击遮罩不关闭弹框</button>
      </div>
      <div class="flex-item">
        <button @click="opneBlank">有遮罩，点击遮罩即可关闭弹框</button>
      </div>
      <div class="flex-item">
        <button @click="opneMove">可以拖动的弹框</button>
      </div>
      <div class="flex-item">
        <button @click="opnehasHead">无头部的弹框</button>
      </div>
      <div class="flex-item">
        <button @click="opnehasMin">无最小化的弹框</button>
      </div>
      <div class="flex-item">
        <button @click="opnehasMax">无最大化的弹框</button>
      </div>
      <div class="flex-item">
        <button @click="opnehasClose">仅有关闭按钮的弹框</button>
      </div>
      <div class="flex-item">
        <button @click="opnebottomOff">弹框最小化距离底部距离</button>
      </div>
      <div class="flex-item">
        <button @click="opneleftOff">弹框最小化距离左部距离</button>
      </div>
      <div class="flex-item">
        <button @click="opneminHight">设置最小化高度</button>
      </div>
      <div class="flex-item">
        <button @click="opneminWidth">设置最小化宽度</button>
      </div>
      <div class="flex-item">
        <button @click="opnerowGap">设置最小化宽度行间距</button>
      </div>
      <div class="flex-item">
        <button @click="opnecolGap">设置最小化宽度列间距</button>
      </div>
      <div class="flex-item">
        <button @click="opnecustomHead">我是自定义头部</button>
      </div>
      <div class="flex-item">
        <button @click="opnemultiple">我是单弹框模式</button>
      </div>
      <div class="flex-item">
        <button @click="opnetheme">我是自定义主题</button>
      </div>
      <div class="flex-item">
        <button @click="opneLan">我是深蓝主题</button>
      </div>
      <div class="flex-item">
        <button @click="opneLv">我是墨绿主题</button>
      </div>
      <div class="flex-item">
        <button @click="opnesuccess">我带有打开成功回调</button>
      </div>
      <div class="flex-item">
        <button @click="opnecancel">我带有关闭成功回调</button>
      </div>
      <div class="flex-item">
        <button @click="opneminBack">我带有最小化成功回调</button>
      </div>
      <div class="flex-item">
        <button @click="opnemaxBack">我带有最大化成功回调</button>
      </div>
      <div class="flex-item">
        <button @click="opnerestore">我带有复原成功回调</button>
      </div>
      <div class="flex-item">
        <button @click="opnemixin">我带有混淆功能</button>
      </div>
    </div>
  </div>
</template>

<script>
import test from "./test.vue";
import testHead from "./testHead.vue";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      dom: undefined,
      vue: undefined,
      html: undefined,
      titleLong: undefined,
    };
  },
  methods: {
    opnemixin() {
      this.$dialog.open({
        title: "我是标题---html",
        mixin: {
          created() {
            alert("我是混淆执行的成功");
          },
        },
        content: {
          type: "html",
          subCom: "<h1>  mixin: Object,</h1>",
        },
      });
    },
    opnerestore() {
      this.$dialog.open({
        title: "我是标题---html",
        restore: () => {
          alert("复原成功");
        },
        content: {
          type: "html",
          subCom: "<h1>  restore: function,</h1>",
        },
      });
    },
    opnemaxBack() {
      this.$dialog.open({
        title: "我是标题---html",
        maxBack: () => {
          alert("最大化成功");
        },
        content: {
          type: "html",
          subCom: "<h1>  maxBack: function,</h1>",
        },
      });
    },
    opneminBack() {
      this.$dialog.open({
        title: "我是标题---html",
        minBack: () => {
          alert("最小化成功");
        },
        content: {
          type: "html",
          subCom: "<h1>  minBack: function,</h1>",
        },
      });
    },
    opnecancel() {
      this.$dialog.open({
        title: "我是标题---html",
        cancel: () => {
          alert("关闭成功");
        },
        content: {
          type: "html",
          subCom: "<h1>  cancel: function,</h1>",
        },
      });
    },
    opnesuccess() {
      this.html = this.$dialog.open({
        title: "我是标题---html",
        success: () => {
          alert("打开成功");
        },
        content: {
          type: "html",
          subCom: "<h1>  success: function,</h1>",
        },
      });
    },
    opneLv() {
      this.html = this.$dialog.open({
        title: "我是标题---html",
        theme: "theme-lv",
        content: {
          type: "html",
          subCom: "<h1>  theme: theme-lv</h1>",
        },
      });
    },
    opneLan() {
      this.html = this.$dialog.open({
        title: "我是标题---html",
        theme: "theme-lan",
        content: {
          type: "html",
          subCom: "<h1>  theme: theme-lan</h1>",
        },
      });
    },
    opnetheme() {
      this.html = this.$dialog.open({
        title: "我是标题---html",
        theme: "theme_my",
        content: {
          type: "html",
          subCom: "<h1>  theme: theme_my,</h1>",
        },
      });
    },
    opnemultiple() {
      this.html = this.$dialog.open({
        title: "我是标题---html",
        multiple: false,
        content: {
          type: "html",
          subCom: "<h1> multiple: false,,</h1>",
        },
      });
    },
    opnecustomHead() {
      this.$dialog.open({
        title: "我是标题---vue",
        move: true,
        customHead: {
          type: "vue",
          subCom: testHead,
          subData: "我是传递的数据",
        },
        content: {
          type: "html",
          subCom: "<h1>我是自定义头部</h1>",
        },
      });
    },
    opnecolGap() {
      this.html = this.$dialog.open({
        title: "我是标题---html",
        minWidth: 400,
        colGap: 50,
        content: {
          type: "html",
          subCom: "<h1>colGap:50,,</h1>",
        },
      });
    },
    opnerowGap() {
      this.html = this.$dialog.open({
        title: "我是标题---html",
        minWidth: 400,
        rowGap: 50,
        content: {
          type: "html",
          subCom: "<h1>rowGap:50,,</h1>",
        },
      });
    },
    opneminWidth() {
      this.html = this.$dialog.open({
        title: "我是标题---html",
        minWidth: 400,
        content: {
          type: "html",
          subCom: "<h1>   minWidth: 400,</h1>",
        },
      });
    },
    opneminHight() {
      this.html = this.$dialog.open({
        title: "我是标题---html",
        minHight: 30,
        content: {
          type: "html",
          subCom: "<h1>  minHight: 30,</h1>",
        },
      });
    },
    opneleftOff() {
      this.html = this.$dialog.open({
        title: "我是标题---html",
        leftOff: 500,
        content: {
          type: "html",
          subCom: "<h1>leftOff: 500</h1>",
        },
      });
    },
    opnebottomOff() {
      this.html = this.$dialog.open({
        title: "我是标题---html",
        bottomOff: 500,
        content: {
          type: "html",
          subCom: "<h1>bottomOff: 500</h1>",
        },
      });
    },
    opnehasClose() {
      this.html = this.$dialog.open({
        title: "我是标题---html",
        hasMin: false,
        hasMax: false,
        content: {
          type: "html",
          subCom: "<h1>  hasMin: false,hasMax: false</h1>",
        },
      });
    },
    opnehasMax() {
      this.html = this.$dialog.open({
        title: "我是标题---html",
        hasMax: false,
        content: {
          type: "html",
          subCom: "<h1>hasMax: false</h1>",
        },
      });
    },
    opnehasMin() {
      this.html = this.$dialog.open({
        title: "我是标题---html",
        hasMin: false,
        content: {
          type: "html",
          subCom: "<h1>hasMin: false</h1>",
        },
      });
    },
    opnehasHead() {
      this.html = this.$dialog.open({
        title: "我是标题---html",
        hasHead: false,
        content: {
          type: "html",
          subCom: "<h1>hasHead: false</h1>",
        },
      });
    },
    opneMove() {
      this.html = this.$dialog.open({
        title: "我是标题---html",
        move: true,
        content: {
          type: "html",
          subCom: "<h1>move: true</h1>",
        },
      });
    },
    opneBlank() {
      this.html = this.$dialog.open({
        title: "我是标题---html",
        shade: true,
        blank: true,
        content: {
          type: "html",
          subCom: "<h1>shade: true,blank:true</h1>",
        },
      });
    },
    opneShade() {
      this.html = this.$dialog.open({
        title: "我是标题---html",
        shade: true,
        content: {
          type: "html",
          subCom: "<h1>shade: true</h1>",
        },
      });
    },
    opneLocation() {
      this.html = this.$dialog.open({
        title: "我是标题---html",
        location: {
          top: "400px",
          left: "30%",
        },
        content: {
          type: "html",
          subCom: "<h1>top: 400px，left: 30%,</h1>",
        },
      });
    },
    opneArea() {
      this.html = this.$dialog.open({
        title: "我是标题---html",
        area: {
          height: "400px",
          width: "800px",
        },
        content: {
          type: "html",
          subCom: "<h1>宽800px，高400px</h1>",
        },
      });
    },
    opneDomLong() {
      this.titleLong = this.$dialog.open({
        title:
          "我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题",
        content: {
          type: "dom",
          subCom: this.$el,
        },
      });
    },
    closeDomLong() {
      this.$dialog.close(this.titleLong);
    },
    opneDom() {
      this.dom = this.$dialog.open({
        title: "我是标题---dom",
        content: {
          type: "dom",
          subCom: this.$el,
        },
      });
    },
    opneVue() {
      this.vue = this.$dialog.open({
        title: "我是标题---vue",
        content: {
          type: "vue",
          subCom: test,
          subData: "我是外部传递的数据",
        },
      });
    },
    opneHTM() {
      this.html = this.$dialog.open({
        title: "我是标题---html",
        content: {
          type: "html",
          subCom: "<h1>我是html</h1>",
        },
      });
    },
    closeHTM() {
      this.$dialog.close(this.html);
    },
    closeVue() {
      this.$dialog.close(this.vue);
    },
    closeDom() {
      this.$dialog.close(this.dom);
    },
    closeAll() {
      this.$dialog.closeAll();
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.flex-div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.flex-item {
  border: solid;
  padding: 16px;
  margin: 8px;
}
</style>
